<template>
  <div class="h5-article">
    <div
      class="bg"
      :style="`background-image: url(${info.cover}?x-oss-process=image/blur,r_50,s_30)`"
    ></div>
    <!-- video -->
    <jimu-video imu-video :vid="info.videoId" v-if="info.videoId" :data="info"></jimu-video>
    <!-- 文章标题 -->
    <h1 class="title col-layout">{{ info.title }}</h1>
    <div class="publish col-layout" v-if="info.videoId">
      <span v-if="info.category">{{ info.category }}</span>
      <span v-if="info.onlineAt">发布时间：{{ info.onlineAt }}</span>
      <!-- pm讲先隐藏 -->
      <!-- <span v-if="info.statis && info.statis.viewCnt && info.statis.viewCnt > 100">
        浏览量：{{ info.statis.viewCnt }}
      </span> -->
    </div>
    <tag-list
      :tags="info.tags"
      v-if="info && info.tags && info.videoId"
      class="col-layout"
    ></tag-list>

    <div class="author" v-if="info.user && !info.videoId">
      <div class="flex" v-app-jump="{ to: `mtjimu://works?id=${info.workId}` }">
        <img class="avatar" :src="info.user.avatar" />
        <p class="nickname">{{ info.user.nickname }}</p>
      </div>
      <button
        class="follow-btn"
        v-if="info.user && info.user.uuid"
        v-app-jump="{ to: `mtjimu://works?id=${info.workId}` }"
      >
        关注
      </button>
    </div>
    <!-- article -->
    <hybrid-article
      v-if="info && info.workId"
      :outter-info="info"
      class="article-content"
      ref="article"
    ></hybrid-article>
    <div class="publish col-layout" v-if="!info.videoId">
      <span v-if="info.category">{{ info.category }}</span>
      <span v-if="info.onlineAt">发布时间：{{ info.onlineAt }}</span>
      <span v-if="info.statis && info.statis.viewCnt && info.statis.viewCnt > 100">
        浏览量：{{ info.statis.viewCnt }}
      </span>
    </div>

    <tag-list
      :tags="info.tags"
      v-if="info && info.tags && !info.videoId"
      class="col-layout"
    ></tag-list>

    <buy-mater class="col-layout" v-if="info.material" :mater="info.material"></buy-mater>

    <other-work
      v-if="info && info.user && info.user.uuid && [4].includes(info.workType)"
    ></other-work>

    <attach-list class="col-layout" v-if="info.material" :mater="info.material"></attach-list>

    <author-list
      class="col-layout"
      v-if="info.creators"
      :creators="info.creators"
      :data="info"
    ></author-list>

    <comment-list class="col-layout" :info="info" v-if="info.workId"></comment-list>

    <work-list
      class="col-layout"
      v-if="info && info.user && info.user.uuid && [1, 2, 3].includes(info.workType)"
      :info="info"
    ></work-list>

    <material-list
      class="col-layout"
      v-if="info && info.user && info.user.uuid && [4].includes(info.workType)"
      :user="info.user"
    ></material-list>
    <open-app v-app-jump="{ to: `mtjimu://works?id=${id}` }"></open-app>
  </div>
</template>

<script>
  import JimuVideo from 'comp/Video';
  import qs from 'qs';
  import OpenApp from '../../components/BottomOpenAppAdv.vue';
  import CommentList from './CommentList';
  import AuthorList from './AuthorList';
  import WorkList from './WorkList.vue';
  import MaterialList from './MaterialList.vue';
  import BuyMater from './BuyMater';
  import AttachList from './AttachList.vue';
  import TagList from './TagList.vue';
  import OtherWork from './OtherWork.vue';

  export default {
    data() {
      return {
        videoInfo: {
          poster: '',
          video: '',
        },
        info: {
          content: '',
        },
      };
    },
    components: {
      JimuVideo,
      CommentList,
      AuthorList,
      MaterialList,
      WorkList,
      BuyMater,
      AttachList,
      TagList,
      OtherWork,
      OpenApp,
    },
    watch: {
      $route() {
        this.getContent();
      },
    },
    created() {
      document.title = '详情';
    },
    computed: {
      id() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
    },
    mounted() {
      if (!this.id) {
        this.$Toast('缺少文章ID');
        return;
      }
      if (!this.$UA.isMobile) {
        window.location.href = 'https://jimu.movtile.com/works/' + this.id;
        return;
      }
      this.getContent();

      // PV上报
      this.$MutongPv.pv({
        pt: 'jm',
        pid:'work',
        bid:this.id || '',
      });
    },
    methods: {
      /**
       * 获取富文本
       */
      getContent() {
        this.$service
          .SquareWorkDetail({
            workId: this.id,
          })
          .then((res) => {
            this.info = res;
            document.title = res.title;
            wx.ready(() => {
              this.$setShareInfo(res.shareInfo);
            });
            window.$JMRegisteredFunc['jm:setTheme']({ dark: 1 });
            // 设置原创转载
            this.$nextTick(() => {
              this.$refs.article.original = !!this.info.original;
              this.$refs.article.repostable = !!this.info.repostable;
            });
          })
          .catch((err) => {
            console.log(err);
            const msg = (err && err.data && err.data.message) || '文章获取失败';
            this.$Toast(msg);
          });
      },
    },
  };
</script>

<style lang="less">
  html {
    -webkit-text-size-adjust: auto;
    // text-size-adjust: 100%;
  }

  html,
  body {
    width: 100%;
    max-width: 750px;
  }

  .h5-article {
    padding: 0 0 8rem;
    color: var(--textBrightColor);
    min-height: 100vh;
    position: relative;
    word-break: break-word;
    .bg {
      position: fixed;
      background-repeat: no-repeat;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      z-index: -1;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      &:after {
        content: '';
        display: block;
        background-color: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }

    .col-layout {
      margin-right: 2rem;
      margin-left: 2rem;
    }

    .article {
      .content {
        p {
        }
      }
      .image-box {
        img {
          width: 100%;
          height: 100%;
          font-size: 0;
          margin-bottom: 2rem;
        }
      }
    }

    h1.title {
      font-size: 2rem;
      line-height: 1.4;
      margin-top: 2.5rem;
      color: rgba(255, 255, 255, 0.9);
    }
    .author {
      margin: 1.6rem 2rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .flex {
        align-items: center;
      }
      .avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        margin-right: 0.8rem;
        flex-shrink: 0;
      }
      .nickname {
        font-size: 1.6rem;
        color: var(--textGrayColor);
      }
      .follow-btn {
        width: 6rem;
        height: 2.8rem;
        border-width: 0.1rem;
        font-size: 1.4rem;
      }
    }
    .article {
      .content img {
        border-radius: 0;
      }
    }
    .article-content {
      user-select: text !important;
    }
    .publish {
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      // font-size: 1.2rem;
      color: rgba(#ffffff, 0.5);

      span {
        margin-right: 1.2rem;
      }
    }

    .seeall {
      font-size: 1.4rem;
      font-weight: 800;
      color: rgba(#ffffff, 0.5);
      text-align: center;
      margin: 2.5rem auto;
    }
  }
</style>
